<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>獭米英语单词本 - 专属于您的英语单词本 | Tami English Vocabulary Book</title>
  
  <!-- SEO Meta Tags -->
  <meta name="description" content="獭米英语单词本是一个智能的英语学习平台，提供个性化单词管理、智能测试、学习进度跟踪等功能。支持用户自定义词库，科学记忆方法，助力英语学习效率提升。">
  <meta name="keywords" content="英语学习,单词本,词汇管理,英语测试,记忆训练,学习工具,English vocabulary,word book,language learning,獭米网络">
  <meta name="author" content="Aulence Verrill">
  <meta name="robots" content="index, follow">
  <meta name="copyright" content="© 2025 成都獭米网络科技有限公司 保留所有权利">
  <meta name="generator" content="Tami Network Technology">
  <meta name="language" content="zh-CN">
  <meta name="revisit-after" content="7 days">
  <meta name="distribution" content="global">
  
  <!-- Open Graph Meta Tags -->
  <meta property="og:title" content="獭米英语单词本 - 专属于您的英语单词本">
  <meta property="og:description" content="个性化英语单词管理和学习平台，提供智能测试、进度跟踪等功能，助力高效英语学习。">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://vocabulary.aulence.com">
  <meta property="og:image" content="https://vocabulary.aulence.com/img/logo.png">
  <meta property="og:site_name" content="獭米英语单词本">
  <meta property="og:locale" content="zh_CN">
  
  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="獭米英语单词本 - 专属于您的英语单词本k">
  <meta name="twitter:description" content="个性化英语单词管理和学习平台，提供智能测试、进度跟踪等功能。">
  <meta name="twitter:image" content="https://vocabulary.aulence.com/img/logo.png">
  
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/input-number.css">
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <!-- Logo区域 -->
    <div class="navbar-left">
      <a href="#" class="navbar-brand" data-page="wordlist">
        <img src="img/logo.png" alt="Logo" class="logo">
        <div class="brand-text">
          <span class="brand-name">獭米英语单词本</span>
          <span class="brand-slogan">Tami English Vocabulary Book</span>
        </div>
      </a>
    </div>
    
    <!-- 导航链接区域 -->
    <div class="navbar-center">
      <div class="navbar-nav">
        <a href="#" class="nav-link active" data-page="wordlist">单词列表</a>
        <a href="#" class="nav-link" data-page="vocabulary-test">测试词汇</a>
      </div>
    </div>
    
    <!-- 用户区域 -->
      <div class="navbar-right">
        <div class="nav-user" id="nav-user">
          <a href="pages/account.html" class="nav-link" id="nav-login">登录</a>
          <div class="user-dropdown" id="user-dropdown" style="display: none;">
            <div class="user-info">
              <img src="img/default-avatar.png" alt="头像" class="user-avatar" id="nav-user-avatar">
              <span class="nav-username" id="nav-username">用户名</span>
            </div>
            <div class="dropdown-menu" id="dropdown-menu">
              <a href="pages/user.html" class="dropdown-item">个人中心</a>
              <button class="dropdown-item logout-btn" id="logout-btn">退出登录</button>
            </div>
          </div>
        </div>
      </div>
  </nav>
  
  <div class="app">
    
    <header class="app-header">
      <div class="search-container">
        <div class="search-box">
          <input type="text" id="search-input" placeholder="搜索单词...">
          <button class="search-btn">搜索单词</button>
          <button class="clear-search-btn hidden">清空搜索</button>
        </div>
        <div class="add-box">
          <button id="add-btn">添加单词</button>
        </div>
      </div>
    </header>
    
    <main class="word-list-container">
      <div class="filter-controls">
        <div class="filter-buttons">
          <button class="filter-btn active" data-filter="newest">最新</button>
          <button class="filter-btn" data-filter="oldest">最旧</button>
          <button class="filter-btn" data-filter="memorized">已记住</button>
          <button class="filter-btn" data-filter="unmemorized">未记住</button>
        </div>
        <div class="manage-controls">
          <button class="manage-btn" id="manage-btn">管理</button>
          <div class="manage-actions" id="manage-actions" style="display: none;">
            <button class="manage-action-btn danger" id="delete-selected-btn">删除选中</button>
            <button class="manage-action-btn" id="finish-manage-btn">完成</button>
          </div>
        </div>
      </div>
      <table id="word-table">
        <thead>
          <tr>
            <th class="checkbox-column" style="display: none;">
              <input type="checkbox" id="select-all-checkbox" />
            </th>
            <th>序号</th>
            <th>单词</th>
            <th>读音 (美式)</th>
            <th>翻译</th>
            <th>例句</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="word-list">
          <!-- 单词列表将通过JavaScript动态生成 -->
        </tbody>
      </table>
      
      <div class="empty-message hidden">
        <p>暂无单词数据</p>
      </div>
      
      <!-- 分页器 -->
      <div class="pagination-container">
        <div class="pagination">
          <button class="pagination-btn" id="first-page" title="首页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
            </svg>
          </button>
          <button class="pagination-btn" id="prev-page" title="上一页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
            </svg>
          </button>
          <div class="page-numbers" id="page-numbers"></div>
          <button class="pagination-btn" id="next-page" title="下一页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
            </svg>
          </button>
          <button class="pagination-btn" id="last-page" title="末页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
            </svg>
          </button>
        </div>
        <div class="page-jump">
          <span>跳到</span>
          <!-- <input type="number" id="jump-page" min="1" placeholder="页码"> -->
          <div id="jump-page"></div>
          <span>页</span>
          <button class="pagination-btn" id="jump-btn">跳转</button>
        </div>
        <div class="page-info">
          <span id="page-info-text">第 1 页，共 1 页</span>
        </div>
      </div>
    </main>
    
    <!-- 添加单词的模态框 -->
    <div id="word-modal" class="modal hidden">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h2 id="modal-title">添加新单词</h2>
        <form class="word-form">
          <div class="form-group">
            <label for="word">单词:</label>
            <input type="text" id="word" required>
          </div>
          <div class="form-group">
            <label for="pronunciation">读音 (美式):</label>
            <input type="text" id="pronunciation" placeholder="例如: hə'loʊ (美式发音)">
            <small class="pronunciation-hint">请输入美式英语发音的国际音标</small>
          </div>
          <div class="form-group">
            <label for="translation">翻译:</label>
            <textarea id="translation" rows="2" required></textarea>
          </div>
          <div class="form-group">
            <label for="example">例句:</label>
            <textarea id="example" rows="3"></textarea>
          </div>
          <div class="form-actions">
            <button type="button" class="cancel-btn">取消</button>
            <button type="submit" id="save-btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-container">
      <div class="footer-content">
        <p>
          <a href="https://www.tami-network.com/" target="_blank">獭米网络官网</a>
          <span class="footer-separator">|</span>
          <a href="mailto:tami-network@163.com">tami-network@163.com</a>
          <span class="footer-separator">|</span>
          <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024099604号-2</a>
          <span class="footer-separator">|</span>
          ©2025 成都獭米网络科技有限公司 保留所有权利
          <span class="footer-separator">|</span>
          v1.1.2
        </p>
      </div>
    </div>
  </footer>

  <script src="js/plugins.js"></script>
  <script src="js/api-client.js"></script>
  <script src="js/app.js"></script>
</body>
</html>